﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication12.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Naloga 12</title>
    <link href="design/styles/stylesheet.css" rel="stylesheet" />
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script type="text/javascript" src="Scripts/Highcharts-4.0.1/js/highcharts.js"></script>
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('.podrobnosti tbody tr').click(function () {
                $('.podrobnosti .vrstica').removeClass('vrstica');
                $(this).addClass('vrstica');
                var id = $(this).attr('data-obcina-id');
                var ime = $(this).attr('data-obcina-ime');
                $.ajax({
                    type: "GET",
                    url: "servis.ashx",
                    contentType: "application/json; charset=utf-8",
                    data: { ObcinaID : id },
                    error: function (r, s, e) {
                        alert('Prišlo je do napake.');

                        $('.ajax .title').html('Občina:');
                        $('#AjaxObcinaStSkupaj').html('');
                        $('#AjaxObcinaStMoskih').html('');
                        $('#AjaxObcinaStZensk').html('');
                        $('#AjaxObcinaPrirastek').html('');
                        $('#AjaxObcinaStAvtomobilov').html('');
                        $('#AjaxObcinaGraf').html('');
                    },
                    success: function (data) {
                        $('.ajax .title').html(ime);
                        $('#AjaxObcinaStSkupaj').html(data.StPrebivalcev);
                        $('#AjaxObcinaStMoskih').html(data.StMoskih);
                        $('#AjaxObcinaStZensk').html(data.StZensk);
                        $('#AjaxObcinaPrirastek').html(data.NaravniPrirastek);
                        $('#AjaxObcinaStAvtomobilov').html(data.StAvtomobilov);
                        $('#AjaxObcinaGraf').html(data.Graf);

                        var num = parseInt(data.NaravniPrirastek);
                        if (num > 0)
                            $('#AjaxObcinaPrirastek').removeClass('negativen').addClass('pozitiven');
                        else if (num < 0)
                            $('#AjaxObcinaPrirastek').removeClass('pozitiven').addClass('negativen');
                        else
                            $('#AjaxObcinaPrirastek').removeClass('pozitiven').removeClass('negativen');
                    }
                });
            });

            $("#slider-6").slider({
                range: true,
                min: 6000,
                max: 600000,
                values: [10000, 400000],
                slide: function (event, ui) {
                    var tmpMin = ui.values[0];
                    var tmpMax = ui.values[1];

                    $('.podrobnosti tbody').find('tr').each(function (i, el) {
                        var tmp = $(el).attr('data-obcina-povrsina').replace(',', '');
                        tmp = tmp.substr(0, tmp.length - 1);
                        var area = parseInt(tmp);
                        if (area != undefined) {
                            if (area < tmpMin || area > tmpMax) {
                                $(el).addClass('hidden');
                            } else {
                                $(el).removeClass('hidden');
                            }
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="asm" runat="server" />
        <div class="page">
            <div class="top">
                <img title="Naloga 12" height="48" class="logo" src="design/images/slovenia.png" />
                <a href="Default.aspx"><h1>Naloga 12</h1></a>
            </div>
            <div class="middle">
                <div class="box izbirnik levo">
                    <p class="title">Regija</p>

                    <asp:DropDownList ID="IzbirnikRegije" runat="server" 
                                      AppendDataBoundItems="true" AutoPostBack="true"
                                      DataSourceID="SqlDataSourceRegije" DataTextField="name" DataValueField="pk_regionID"
                                      OnSelectedIndexChanged="IzbirnikRegije_SelectedIndexChanged">
                        <asp:ListItem Value="0" Text="Izberi regijo" Selected="True" />
                    </asp:DropDownList>
                    <asp:SqlDataSource ID="SqlDataSourceRegije" runat="server" 
                                       ConnectionString="<%$ ConnectionStrings:StatistikaConnectionString %>" SelectCommand="SELECT * FROM [Region]"></asp:SqlDataSource>

                    <div class="statistika">
                        <p>
                            <asp:Label ID="StatistikaRegija" runat="server" />
                        </p>
                        <p>
                            <label>Skupaj prebivalcev:</label>
                            <asp:Label ID="StatistikaRegijaStSkupno" runat="server" />
                        </p>
                        <p>
                            <label>moških: </label>
                            <asp:Label ID="StatistikaRegijaStMoskih" runat="server" />
                        </p>
                        <p>
                            <label>žensk: </label>
                            <asp:Label ID="StatistikaRegijaStZensk" runat="server" />
                        </p>
                        <asp:Literal ID="ltrChart" runat="server"></asp:Literal>
                        <hr />
                        <p>
                            <label>Število avtomobilov: </label>
                            <asp:Label ID="StatistikaRegijaStAvtomobilov" runat="server" />
                        </p>
                    </div>                    
                </div>
                <div class="box podrobnosti levo">
                    <p class="title">Izberi območje velikosti občine v regiji</p>
                       
                    <div id="slider-6"></div>
                    
                    <asp:HiddenField ID="FieldMinVal" runat="server" Value="1" />
                    <asp:HiddenField ID="FieldMaxVal" runat="server" Value="100" />

                    <asp:HiddenField ID="HF_Order_Field" runat="server" Value="povrsina" />
                    <asp:HiddenField ID="HF_Order_Direction" runat="server" Value="desc" />
                    <table>
                        <thead>
                            <tr>
                                <th style="width:75%">
                                    <asp:LinkButton ID="SeznamObcinObcina" runat="server" Text="Občina" OnClick="SeznamObcinObcina_Click" />
                                </th>
                                <th style="width:25%">
                                    <asp:LinkButton ID="SeznamObcinPovrsina" runat="server" Text="Površina" OnClick="SeznamObcinPovrsina_Click" />
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <asp:Repeater ID="SeznamObcin" runat="server">
                                <ItemTemplate>
                                    <tr data-obcina-id='<%# DataBinder.Eval(Container.DataItem, "obcinaID") %>'
                                        data-obcina-ime='<%# DataBinder.Eval(Container.DataItem, "name") %>'
                                        data-obcina-povrsina='<%# DataBinder.Eval(Container.DataItem, "area") %>'>
                                        <td><asp:Literal ID="ObcinaIme" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "name") %>' /></td>
                                        <td class="stevilka"><asp:Literal ID="ObcinaPovrsina" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "area") %>' /></td>
                                    </tr>
                                </ItemTemplate>
                            </asp:Repeater>
                        </tbody>
                    </table>
                </div>
                <div class="box ajax desno">
                    <p class="title">Občina</p>

                    <div id="AjaxObcinaStatistika" class="statistika">
                        <p>
                            <label>Skupaj prebivalcev:</label>
                            <label id="AjaxObcinaStSkupaj"></label>
                        </p>
                        <p>
                            <label>moških: </label>
                            <label id="AjaxObcinaStMoskih"></label>
                        </p>
                        <p>
                            <label>žensk: </label>
                            <label id="AjaxObcinaStZensk"></label>
                        </p>
                        <p>
                            <label>naravni prirastek: </label>
                            <label id="AjaxObcinaPrirastek"></label>
                            <label id="AjaxObcinaPrirastekStatus"></label>
                        </p>

                        <div id="AjaxObcinaGraf"></div>
                        <hr />
                        <p>
                            <label>Število avtomobilov: </label>
                            <label id="AjaxObcinaStAvtomobilov"></label>
                        </p>
                    </div>
                </div>
                <div class="pocisti"></div>
            </div>
            <div class="bottom">
                
                <span>Ime Priimek, 2014</span>
            </div>
        </div>
    </form>
</body>
</html>
